<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="changeTab">
        <el-tab-pane v-permission="['sysSetting:tasks']" :label="'系统任务'" :lazy="true" :id="0" name="system_task" class="margin-10">
          <task/>
        </el-tab-pane>
        <el-tab-pane v-permission="['sysSetting:list']" :label="configGroup.system.name" :id="configGroup.system.id" name="system" class="margin-10">
          <el-form ref="configForm" :model="configForm" label-width="150px">
            <el-form-item label="图片服务器根地址" prop="xcxAppId">
              <el-input v-model="configForm.picServer" placeholder="请输入图片服务器根地址" />
            </el-form-item>
            <el-form-item label="腾讯地图API KEY" prop="xcxAppSecret">
              <el-input v-model="configForm.tentcentMapKey" placeholder="请输入腾讯地图API KEY,小程序端地图使用" />
            </el-form-item>
          </el-form>
          <div class="op-container text-center">
            <el-button v-permission="['sysSetting:edit']" :loading="submitIng" type="primary" @click="handleSave">保存更改</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane v-permission="['sysSetting:list']" :label="configGroup.water_mark.name" :id="configGroup.water_mark.id" name="water_mark" class="margin-10">
          <el-form ref="configForm" :model="configForm" label-width="150px">
            <el-form-item label="开启水印" prop="openWaterMark">
              <el-radio-group v-model="configForm.openWaterMark">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="图片水印" prop="imgWaterMark">
              <el-radio-group v-model="configForm.imgWaterMark">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="图片水印控制">
              <el-input v-model="configForm.imgWidth" style="width:120px" placeholder="宽"/>&nbsp;&nbsp;x&nbsp;
              <el-input v-model="configForm.imgHeight" style="width:120px" placeholder="高"/>&nbsp;&nbsp;宽 × 高 ; 小于该尺寸的图片不添加水印
            </el-form-item>
            <el-form-item label="水印图片">
              <uploader :file-list.sync="fileList" @success="uploadWaterMarkImgSuccess" @remove="removeWaterMarkImgSuccess"/>
            </el-form-item>
            <el-form-item label="水印文字" prop="text" style="float:left">
              <el-input v-model="configForm.text" />
            </el-form-item>
            <el-form-item label="文字字体" prop="font" style="float:left">
              <el-select v-model="configForm.font" placeholder="请选择文字字体">
                <el-option v-for="font in fonts" :key="font" :label="font" :value="font"/>
              </el-select>
            </el-form-item>
            <div class="clearfix"/>
            <el-form-item label="文字大小" prop="size" style="float:left">
              <el-input v-model="configForm.size" />
            </el-form-item>
            <el-form-item label="文字颜色" prop="color" style="float:left">
              <el-input v-model="configForm.color" style="float:left;width:200px;" readonly/>
              <el-color-picker v-model="configForm.color" style="float:left;" @change="chooseColor"/>
            </el-form-item>
            <el-form-item label="透明度" prop="alpha" style="float:left">
              <el-input v-model="configForm.alpha" />
            </el-form-item>
            <div class="clearfix"/>
            <el-form-item label="水印位置" prop="pos" style="float:left">
              <el-input v-model="configForm.pos" />
            </el-form-item>
            <el-form-item label="x偏移量" prop="offsetX" style="float:left">
              <el-input v-model="configForm.offsetX" />
            </el-form-item>
            <el-form-item label="y偏移量" prop="offsetY" style="float:left">
              <el-input v-model="configForm.offsetY" />
            </el-form-item>
          </el-form>
          <div class="clearfix"/>
          <div class="op-container text-center">
            <el-button v-permission="['sysSetting:edit']" :loading="submitIng" type="primary" @click="handleSave">保存更改</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane v-permission="['sysSetting:serviceParams']" :label="'服务监控'" :lazy="true" :id="-1" name="system_params" class="margin-10">
          <Params/>
        </el-tab-pane>
        <el-tab-pane v-permission="['sysSetting:cacheParams']" :label="'缓存监控'" :lazy="true" :id="-2" name="cache_params" class="margin-10">
          <Cache/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { ConfigService, uploadPath } from '@/api/SystemService'
import Notify from '@/utils/notify'
import Uploader from '@/components/Uploader'
import Task from '@/views/system/task'
import Params from '@/views/system/params'
import Cache from '@/views/system/cache'

export default {
  name: 'SysConfig', components: { Uploader, Task, Params, Cache },
  data() {
    return {
      uploadPath: uploadPath, fileList: [],
      fonts: [], activeName: 'system_task', configForm: {}, submitIng: false,
      configGroup: {
        water_mark: { id: 6, name: '水印配置' },
        system: { id: 7, name: '系统参数' }}
    }
  },
  methods: {
    loadData(type) {
      ConfigService.getSysConfig(type).then(res => {
        this.configForm = res
        if (type === this.configGroup.water_mark.id) {
          const url = res.url
          if (res.img) {
            this.fileList = [{ name: url.substring(url.lastIndexOf('/')), url: url }]
          }
          this.loadSystemFont()
        }
      })
    },
    changeTab(tab) {
      const id = tab.$attrs.id
      if (id > 0) {
        this.loadData(id)
      }
    },
    handleSave() {
      this.submitIng = true
      ConfigService.saveSysConfig(this.configForm).then(() => {
        Notify.success(this, '保存成功!')
        this.submitIng = false
      })
    },
    uploadWaterMarkImgSuccess(data) {
      this.configForm.img = data.path
    },
    removeWaterMarkImgSuccess() {
      this.configForm.img = undefined
    },
    loadSystemFont() {
      ConfigService.systemFonts().then(result => {
        this.fonts = result
      })
    },
    chooseColor(color) {
      this.configForm.color = color
    }
  }
}
</script>
<style>
  .el-upload-list__item-name{white-space:unset;}
</style>
